import React from 'react'
import { connect } from 'react-redux'
import { Button } from 'semantic-ui-react'
import { push } from 'connected-react-router'
import { SubNavMenu, SubNavItem, SubNavSubItem } from 'components/navListMenv'

const DataSetList = ({ activeItem, link, orgName }) => (
  <SubNavMenu vertical tabular>
    <SubNavItem className="subnav top">
      {' '}
      <Button
        basic
        color="blue"
        fluid
        onClick={() => link(`/org/${orgName}/user/members/invite/new`)}
      >
        邀请新成员
      </Button>
    </SubNavItem>
    <SubNavItem className="subnav section" name="" />
    <SubNavSubItem
      className={activeItem === 'members' ? 'subactive' : ''}
      onClick={() => link(`/org/${orgName}/user/members`)}
    >
      <a>
        <span>成员列表</span>
      </a>
    </SubNavSubItem>
    <SubNavSubItem
      className={activeItem === 'teams' ? 'subactive' : ''}
      onClick={() => link(`/org/${orgName}/user/teams`)}
    >
      <a>
        <span>组织架构</span>
      </a>
    </SubNavSubItem>
  </SubNavMenu>
)

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(DataSetList)
